﻿<template>
  <div class="layout-container">
    <aside class="sidebar">
      <nav>
        <h2>Vue代码示例</h2>
        <ul>
          <li><router-link to="/chapter1">第一章 Vue 的基本语法</router-link></li>
          <li><router-link to="/chapter2">第二章 组件</router-link></li>
          <li><router-link to="/chapter3">第三章 Vue 的组合式 API</router-link></li>
          <li><router-link to="/chapter4">第四章 状态管理器 Pinia</router-link></li>
        </ul>
      </nav>
    </aside>
    <main class="content">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'DefaultLayout'
}
</script>

<style >
.layout-container {
  display: flex;
  flex-wrap: nowrap; /* 防止内容区域被换行 */
}

.sidebar {
  width: 240px;
  background-color: #f4f4f4;
  padding: 20px;
  height: 100vh; /* 完整视窗高度 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  position: fixed; /* 固定侧边栏位置 */
  top: 0;
  left: 0;
}

.content {
  margin-left: 240px; /* 与侧边栏宽度相同，防止内容被侧边栏覆盖 */
  padding: 20px;
  width: calc(100% - 240px); /* 减去侧边栏宽度 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
}
</style>



